<template>
  <div class="list">
    <div class="list_item" v-for="(im, ix) in list" :key="ix" @click="jump(im.id)">
      <div class="pic"></div>
      <div class="tit">
        {{ im.title }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, Ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
interface lists {
  title: string
  id: number
}
let router = useRouter()
let list: Ref<Array<lists>> = ref([
  {
    title: '手动阀手动阀手动阀',
    id: 0
  },
  {
    title: '手动阀手动阀手动阀',
    id: 0
  },
  {
    title: '手动阀手动阀手动阀',
    id: 0
  },
  {
    title: '手动阀手动阀手动阀',
    id: 0
  },
  {
    title: '手动阀手动阀手动阀',
    id: 1
  },
  {
    title: '手动阀手动阀手动阀',
    id: 2
  }
])
function jump(id: number) {
  router.push({ path: './Details', query: { id: id } })
}
</script>



<style lang="less" scoped>
.list_item:nth-child(odd) {
  margin-right: 40px;
}
.list_item:nth-child(even) {
  margin-left: 48px;
}
.list {
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;

  .list_item {
    width: 310px;
    font-size: 30px;
    .pic {
      height: 160px;
      background: #c0c0c0;
    }
  }
}
</style>
